<template>
  <div class="flightorderdispose">
         <div class="flightorderdispose_top">
             <el-form :model="paywayList"  ref="paywayList" size="mini"  class="demo-ruleForm">
                <div style="display:flex">
                    <el-form-item label="会员"  style="display:flex;margin:0 20px 0 0">
                      <el-input :disabled="true" style="width:100px" v-model="paywayList.customerName"></el-input>
                    </el-form-item>
                    <el-form-item label="支付总金额"  style="display:flex;margin:0 20px 0 0">
                      <el-input :disabled="true" style="width:120px" v-model="paywayList.payAmount"></el-input>
                    </el-form-item>
                    <el-form-item label="应支付金额"  style="display:flex;margin:0 20px 0 0">
                      <el-input :disabled="true" style="width:120px" v-model="paywayList.handleAmount"></el-input>
                    </el-form-item>
                    <el-form-item label="剩余预留款金额"  style="display:flex">
                      <el-input :disabled="true" style="width:120px" v-model="paywayList.reserveMoney"></el-input>
                    </el-form-item>
                </div>
                <div style="display:flex">
                    <el-form-item label="会员类型"  style="display:flex;margin:0 20px 0 0">
                      <el-input :disabled="true" style="width:100px" v-model="paywayList.customerType"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人"  style="display:flex;margin:0 20px 0 0">
                      <el-input :disabled="true" style="width:120px" v-model="paywayList.name"></el-input>
                    </el-form-item>
                    <el-form-item label="会员证件"  style="display:flex;margin:0 20px 0 0">
                      <el-input  :disabled="true" style="width:180px" v-model="paywayList.customerCode"></el-input>
                    </el-form-item>
                    <el-form-item label="联系手机"  style="display:flex">
                      <el-input :disabled="true" style="width:120px" v-model="paywayList.phone"></el-input>
                    </el-form-item>
                </div>
                <div style="display:flex;margin:0 0 20px 0">
                    <el-form-item label="描述"  style="display:flex;margin:0 20px 0 0">
                      {{paywayList.describe}}
                    </el-form-item>
                </div>
                <!-- <div style="display:flex;margin:0 0 20px 0">
                    <el-form-item label="合作商备注"  style="display:flex;margin:0 20px 0 0">
                    </el-form-item>
                </div>
                 <div style="display:flex;margin:0 0 20px 0">
                    <el-form-item label="内部注意事项"  style="display:flex;margin:0 20px 0 0">
                    </el-form-item>
                </div>
                <div style="display:flex;margin:0 0 20px 0">
                    <el-form-item label="支付注意事项"  style="display:flex;margin:0 20px 0 0">
                    </el-form-item>
                </div>
                 <div style="display:flex;margin:0 0 20px 0">
                    <el-form-item label="重要提示"  style="display:flex;margin:0 20px 0 0">
                      <div style="color:red"></div>
                    </el-form-item>
                </div> -->
                 <div style="display:flex;margin:0 0 20px 0">
                    <el-form-item label="备注"  style="display:flex;margin:0 20px 0 0">
                      <el-input style="width:500px" v-model="paywayList.remark" type="textarea" :rows="2" placeholder="请输入内容" ></el-input>
                    </el-form-item>
                    <el-button type="primary" @click="modifyRemark">保存备注</el-button>
                </div>
                 <el-form-item   style="display:flex;margin:0 20px 0 0">
                  
                   <!-- <el-button type="primary">保存</el-button> -->
                   <!-- <el-button type="primary" @click="cancel">返回上一页</el-button> -->
                   <el-button type="primary" @click="networkdispose">再次发起收款</el-button>
                   <el-button type="primary" @click="recordbutton">再次发起线下收款</el-button>
                 </el-form-item>
             </el-form>
         </div>
         <!-- 乘客信息 -->
          <div class="Tab">
            <div>乘客信息</div>
             <el-table
                :header-cell-style="{ color: '#fff', background: '#6090EC', fontSize: '11px',  fontWeight: 'normal', }"
                :data="auxiliary" size="mini" border stripe>
                  <el-table-column label="乘客姓名" width="80px" prop="name"></el-table-column>
                  <el-table-column label="乘客类型" width="80px" prop="type"></el-table-column>
                  <el-table-column label="证件号"  prop="licenseNum"></el-table-column>
                  <!-- <el-table-column label="航空公司" width="120px" prop="endTime"></el-table-column> -->
                  <el-table-column label="航班" width="80px" prop="flight"></el-table-column>
                  <el-table-column label="舱位" width="80px" prop="cabinSeat"></el-table-column>
                  <el-table-column label="票价" width="80px" prop="fare"></el-table-column>
                  <el-table-column label="基建" width="80px" prop="infrastructure"></el-table-column>
                  <el-table-column label="燃油" width="80px" prop="fuel"></el-table-column>
                  <el-table-column label="航程" width="80px" prop="voyage"></el-table-column>
             </el-table>
          </div>
          <div class="Tab">
             <el-table
                :header-cell-style="{ color: '#fff', background: '#6090EC', fontSize: '11px',  fontWeight: 'normal', }"
                :data="datashow" size="mini" border stripe>
                  <el-table-column label="订单号" width="150px" prop="financeConsignPymtLogId"></el-table-column>
                  <el-table-column label="交易金额" width="120px" prop="trascationamount"></el-table-column>
                  <el-table-column label="交易时间"  prop="trascationtime"></el-table-column>
                  <el-table-column label="交易流水号" width="200px" prop="trascationnumber"></el-table-column>
             </el-table>
          </div>
           
          <!-- 网络处理 -->
          <el-dialog title="网络处理" :visible.sync="dialogVisible" :close-on-click-modal="false" width="65%">
            <el-form :model="ruleForm"  ref="ruleForm"  class="demo-ruleForm" size="mini">
              <div style="display:flex;">
                <el-form-item label="姓名"  style="display:flex;margin:0 20px 0 0">
                       <el-input :disabled="true" style="width:100px" v-model="ruleForm.cardholder"></el-input>
                </el-form-item>
                <el-form-item label="支付类型" style="display:flex;margin:0 20px 0 0">
                        <el-select clearable v-model="ruleForm.payType=='debitcard'?'储蓄卡' :'信用卡'" disabled>
                            <el-option
                              v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                </el-form-item>
                <el-form-item label="身份证号"  style="display:flex;">
                       <el-input  style="width:280px" v-model="ruleForm.Idnumber"></el-input>
                </el-form-item>
              </div>
              <div style="display:flex;">
                <el-form-item label="银行卡号"  style="display:flex;margin:0 20px 0 0">
                       <el-input :disabled="true" style="width:280px" v-model="ruleForm.cardNumber"></el-input>
                </el-form-item>
                <el-form-item label="手机号" style="display:flex;margin:0 20px 0 0">
                       <el-input :disabled="true" v-model="ruleForm.contractPhoneOne"></el-input>
                </el-form-item>
              </div>
              <div style="display:flex;margin:10px 0 0 0">
                    <el-form-item label="CVV2"  style="display:flex;margin:0 20px 0 0">
                          <el-input  :disabled="true" v-model="ruleForm.cvv2"></el-input>
                    </el-form-item>
                    <el-form-item label="有效期"  style="display:flex;margin:0 20px 0 0">
                        <el-date-picker :disabled="true" v-model="ruleForm.creditCardTime" format="yyyy-MM-dd"  type="date" placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
              </div>
               <div style="display:flex;margin:10px 0 20px 0">
                    <el-form-item label="备注"   style="display:flex;margin:0 20px 0 0">
                          <el-input type="textarea"  style="width:500px" :rows="2"  v-model="ruleForm.remark"></el-input>
                    </el-form-item>
               </div>
                 <el-form-item style="margin:0 0 0 40%">
                    <el-button type="primary" @click="submitForm('ruleForm')">确认支付</el-button>
                    <el-button type="primary" @click="dialogVisible=false">取消</el-button>
                </el-form-item>
            </el-form>
          </el-dialog>
          <!-- 支付记录录入 -->
            <el-dialog title="再次发起线下收款" :close-on-click-modal="false" :visible.sync="dialogVisiblepayrecord" width="65%" >
            <el-form :model="recordList" :rules="rulesList" ref="recordList"  class="demo-ruleForm" size="mini">
              <div style="display:flex;">
                <el-form-item label="会员名称"  style="display:flex;margin:0 20px 0 0">
                       <el-input style="width:100px" :disabled="true" v-model="recordList.customerName"></el-input>
                </el-form-item>
                <el-form-item label="收款渠道" prop="collectionChannel" style="display:flex;margin:0 20px 0 0">
                    <el-select clearable v-model="recordList.collectionChannel"  >
                       <el-option
                              v-for="item in collectionchannels"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
              </div>
              <div style="display:flex;margin:15px 0 0 0">
                <el-form-item label="收款总金额" prop="amount" style="display:flex;margin:0 20px 0 0">
                       <el-input  v-model="recordList.amount"></el-input>
                </el-form-item>
                <el-form-item label="交易流水号" prop="transactionSerialNumber" style="display:flex;margin:0 20px 0 0">
                       <el-input style="width:280px" v-model="recordList.transactionSerialNumber"></el-input>
                </el-form-item>
              </div>
               <div style="display:flex;margin:15px 0 20px 0">
                    <el-form-item label="备注"  style="display:flex;margin:0 20px 0 0">
                          <el-input type="textarea" style="width:500px" :rows="2"  v-model="recordList.remark"></el-input>
                    </el-form-item>
               </div>
                 <el-form-item style="margin:0 0 0 40%">
                    <el-button type="primary" @click="recorsave('recordList')">保存</el-button>
                    <el-button type="primary" @click="dialogVisiblepayrecord=false">取消</el-button>
                </el-form-item>
            </el-form>
          </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'flightorderdispose',
  data() { 
    return {
      msg:"",
      // 收款渠道
      collectionchannels:[
        {
          value:"remittance",
          label:"汇付天下"
        },
         {
          value:"3",
          label:"银联_电话"
        },
         {
          value:"creditcard",
          label:"易宝_信用卡"
        },
         {
          value:"debitcard",
          label:"易宝_借记卡"
        },
         {
          value:"alipay",
          label:"支付宝"
        },
         {
          value:"weChat",
          label:"微信"
        },
         {
          value:"applets",
          label:"微信小程序"
        },
         {
          value:"unionPayQR",
          label:"银联二维码"
        },
      ],
      // 支付类型
      options:[],
      // 追加的备注
      paywayList:{
      remark:"",
      },
      //信息列表展示
      datashow:[] ,
      // 乘客信息列表
      auxiliary:[],
    // 订单号
    orderId:"",
      // 支付记录
      recordList:{
        collectionChannel:"",
        amount:"",
        transactionSerialNumber:"",
        remark:""
      },
      // 支付记录弹窗
      dialogVisiblepayrecord:false,
      // 网络处理
      dialogVisible:false,
      // 网络处理
      ruleForm:{
        Idnumber:"",
        cardholder:"",
        payType:"",
        contractPhoneOne:"",
        cardNumber:"",
        creditCardTime:"",
        cvv2:"",
        remark:""
      },
      // 网络处理校验
      //  rules: {
      //     name: [{ required: true, message: '请输入活动名称', trigger: 'blur' },],
      //  },
      //  支付记录校验
      rulesList:{
          collectionChannel: [{ required: true, message: '请选择收款渠道', trigger: 'change' },],
          amount: [{ required: true, message: '请输入收款总金额', trigger: 'blur' },],
          transactionSerialNumber: [{ required: true, message: '请输入交易流水号', trigger: 'blur' },],
      },
      // 上
      paywayList:{}
    }
  },
  methods:{
    // 支付记录录入
    getsaveFinanceConsignPymtLog(){
      this.$axios.getsaveFinanceConsignPymtLog({
        // 订单号
        orderNum:this.recordList.orderNum,
        // 收款渠道
        collectionChannel:this.recordList.collectionChannel,
        // 收款总金额
        amount:this.recordList.amount,
        // 交易流水号
        transactionSerialNumber:this.recordList.transactionSerialNumber,
        // 备注
        remark:this.recordList.remark
      }).then((res)=>{
        console.log(res)
        if(res.code=='200'){
        this.dialogVisiblepayrecord = false
             this.$message({
          message: '保存成功',
          type: 'success'
        });
        }else{
           this.$message({
          message: '保存失败，请核对信息，重新保存',
          type: 'warning'
        });
        }
      })
    },
     // 支付记录录入会员名称
      getrecordCustomerName(){
         this.$axios.getrecordCustomerName({
             orderNum:this.orderId
          }).then((res)=>{
            console.log(res)
            if(res.code=='200'){
              this.recordList=res.data
            }
          })
      },
    // 网络处理详情
    getecho(){
      this.$axios.getecho({
          orderNum:this.orderId,
      }).then((res)=>{
        console.log(res)
        if(res.code=='200'){
          this.ruleForm=res.data
        }
      })
    },
    // 网络处理接口支付接口
    getnetworkProcessing(){
      localStorage.setItem("isToken", true); 
      this.$axios.getnetworkProcessing({
        // 订单号
        orderNum:this.ruleForm.orderNum,
        // 支付总金额
        amount:this.ruleForm.amount,
        // 支付方式
        payType:this.ruleForm.payType,
        // 实际支付金额
        actualAmount:this.ruleForm.actualAmount,
        payWay:"Crm",
        // 备注
        remark:this.ruleForm.remark
      }).then((res)=>{
        console.log(res)
        if(res.code=='200'){
          this.dialogVisible=false
            this.$message({
              message: res.msg,
              type: 'success'
            });
        }else{
           this.$message({
          message: '支付失败，请核对信息重新支付',
          type: 'warning'
        });
        }
      })
    },
    // 修改备注按钮
    modifyRemark(){
      if(!this.paywayList.remark){
         this.$message({
          message: '请输入添加的备注后添加备注',
          type: 'warning'
        });
      }else{
          this.getappendRemarks()
      }
    },
    //追加备注(详情)
    getappendRemarks(){
      this.$axios.getappendRemarks({
        orderNum:this.orderId,
        // 追加备注
        remark:this.paywayList.remark
      }).then((res)=>{
        console.log(res)
        if(res.code=='200'){
          this.paywayList=res.data
          this.auxiliary= this.paywayList.passengerVoList,
          this.datashow= this.paywayList.financeConsignPymtLogList
        }
      })
    },
    // 支付记录点击按钮
    recordbutton(){
      this.getrecordCustomerName()
      this.dialogVisiblepayrecord=true
    },
   // 支付记录弹窗确认支付按钮
       recorsave(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.getsaveFinanceConsignPymtLog()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    // 网络处理弹窗确认支付按钮
       submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.getnetworkProcessing()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    // 网络处理按钮
    networkdispose(){
      this.getecho()
      this.dialogVisible=true
    },
    // 表格数据
     // 关闭按钮
    cancel(){
      this.$router.go(-1);
    }, 
    //跳出
      closeLoading() {
      this.tableLoading.close();
    },
    //进入
    showLoading() {
        this.tableLoading = this.$loading({
        text: "拼命加载数据中", //显示在加载图标下方的加载文案
        spinner: "el-icon-loading", //自定义加载图标类名
        background: "rgba(0, 0, 0, 0.4)", //遮罩层颜色
        target: document.querySelector("#table"), //loadin覆盖的dom元素节点
      });
    }, 
  },
  mounted() {
      this.orderId=this.$route.params.orderId
      console.log(this.orderId)
      // 追加备注详情
      this.getappendRemarks()
  },
 }
</script>

<style  scoped>
.flightorderdispose{
  margin: 20px 0 0 0;
}
.flightorderdispose_top{
   display: flex;
  justify-content: center;
}
.Tab{
  margin: 20px;
}
</style>